<template>
	<div class="app">
		<h1 ref="title">我是App组件</h1>
		<button @click="showText">点我输出上方h1中的文字</button>
		<Person ref="ren"/>
		<button @click="test">点我输出$refs.ren看一看</button>
	</div>
</template>

<script>
	import Person from './components/Person'

	export default {
		name:'App',
		components:{Person},
		methods:{
			showText(){
				console.log(this.$refs.title.innerText)
			},
			test(){
				// console.log(this) //App组件的实例对象
				console.log(this.$refs.ren) //Person组件的实例对象
			}
		}
	}
</script>

<style>
	.app{
		background-color: gray;
		padding: 20px;
	}
	button{
		margin-top: 10px;
		margin-bottom: 10px;
	}
</style>

